<template>
	<view class="tui-center">
		<uni-nav-bar fixed left-icon="back" title="门票二维码" @clickLeft="clickLeft()"></uni-nav-bar>
		<view class="pc-container">
			<view class="tui-align-around">
				<view class="tui-icon-qrcode">
					<tki-qrcode
						class="canvas"
						ref="qrcode"
						:val="val"
						:size="size"
						:unit="unit"
						:background="background"
						:foreground="foreground"
						:pdground="pdground"
						:lv="lv"
						:onval="onval"
						:loadMake="loadMake"
					></tki-qrcode>
				</view>
				<view class="tui-align-center">
					<view v-for="(item, index) in productList" :key="index">
						<view class="tui-flex">
							<view class="tui-ssion-title">订单号:</view>
							<view class="tui-ssion-text tui-pd-left">{{item.orderCode}}</view>
						</view>
						<view class="tui-flex">
							<view class="tui-ssion-title">凭证号:</view>
							<view class="tui-ssion-text tui-pd-left">{{item.voucherCode}}</view>
						</view>
						<view class="tui-flex">
							<view class="tui-ssion-title">商品名称:</view>
							<view class="tui-ssion-text tui-pd-left">{{item.title}}</view>
						</view>
						<view class="tui-flex">
							<view class="tui-ssion-title">订单总额:</view>
							<view class="tui-ssion-text tui-pd-left" style="color: red; font-size: 30rpx;">￥{{item.pric}}</view>
						</view>
						<view class="tui-flex">
							<view class="tui-ssion-title">有效期:</view>
							<view class="tui-ssion-text tui-pd-left">{{item.date}}</view>
						</view>
						<view class="tui-flex">
							<view class="tui-ssion-title">下单时间:</view>
							<view class="tui-ssion-text tui-pd-left">{{item.orderTime}}</view>
						</view>
						<view class="tui-flex">
							<view class="tui-ssion-title text-color">门票类型:</view>
							<view class="tui-ssion-text tui-pd-left text-color">{{item.ticketType}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	
	export default {
		name: 'admission',
		components: {
			tkiQrcode
		},
		data() {
			return {
				id: '',
				productList: [],
				val: 'https://jingqu.xianghepiaoju.com/admin/index.html#/',
				// size: 200,
				size: 400,
				unit: 'rpx',
				background: '#fff',
				foreground: '#000',
				pdground: '#000',
				lv: 3,
				onval: true,
				loadMake: true,
				src: ''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getList()
		},
		methods: {
			async getList() {
				console.log(this.id)
				let list = await this.$api.json('ticketList')
				list.forEach(item=>{
					if(item.id == this.id) {
						this.productList.push(item)
					}
				})
				console.log(this.productList)
			},
			clickLeft() {
			    uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.pc-container {
		width: 650rpx;
		min-height: 1000rpx;
		margin: 0 auto;
		padding-top: 60rpx;
		line-height: 2.1;
		.tui-align-around {
			min-height: 996rpx;
			border: 1px solid #BBBBBB;
			display: block;
			.tui-icon-qrcode {
				background-color: #FFFFFF;
				width: 480rpx;
				height: 450rpx;
				margin: 20rpx auto;
				text-align: center;
				padding-top: 60rpx;
			}
			.tui-align-center {
				padding: $uni-spacing-row-base;
				.tui-ssion-title {
					width: 25%;
					text-align: right;
					color: #333;
				}
				.tui-ssion-text{
					flex: 1;
				}
				.text-color {
					color: #FE5B00;
				}
			}
		}
	}
</style>
